<template>
    <div class="category-list-container">
        <!-- 分类列表表格 -->
        <el-table :data="tableData" style="width: 100%" border stripe>
            <!-- 分类名称 -->
            <el-table-column prop="name" label="分类名称" width="200"></el-table-column>
            <!-- 分类ID（辅助展示，可根据需求删除） -->
            <el-table-column prop="id" label="分类ID" width="120"></el-table-column>
        </el-table>

        <!-- 分页组件（接口返回数据未明确分页参数，默认保留基础结构） -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageParams.current" :page-sizes="[10, 20, 30]" :page-size="pageParams.size"
            layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px; text-align: right">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'CategoryList',
    data() {
        return {
            tableData: [], // 分类列表数据
            total: 0, // 分类总条数
            pageParams: { // 分页参数（接口若支持分页可直接使用）
                current: 1, // 当前页
                size: 10 // 每页条数
            }
        };
    },
    created() {
        // 页面初始化时请求分类列表
        this.getCategoryList();
    },
    methods: {
        /**
         * 获取分类列表数据
         */
        async getCategoryList() {
            const res = await this.$axios.post(
                'http://47.104.167.34:9110/api/category/list',
                this.pageParams // POST请求参数（分页信息）
            );
            // 接口请求成功且返回success为true时赋值数据
            if (res.data.success) {
                this.tableData = res.data.data; // 赋值分类列表（核心渲染name字段）
                this.total = res.data.data.length; // 若接口无total字段，用数据长度暂代
            } else {
                // 接口返回失败时提示错误
                this.$message.error(`获取分类列表失败：${res.data.message || '未知错误'}`);
            }
        },

        /**
         * 每页条数改变触发
         * @param {Number} val - 新的每页条数
         */
        handleSizeChange(val) {
            this.pageParams.size = val;
            this.getCategoryList(); // 重新请求分类列表
        },

        /**
         * 当前页改变触发
         * @param {Number} val - 新的当前页
         */
        handleCurrentChange(val) {
            this.pageParams.current = val;
            this.getCategoryList(); // 重新请求分类列表
        }
    }
};
</script>

<style scoped>
.category-list-container {
    padding: 20px;
}
</style>